<template>
  <div id="app">
    <div id="titles">
      <p><img src="../assets/logo.jpg"/></p>
      <!--      {{this.ruleForm.loginname}}-->
    </div>
    <div style="height: 600px">
      <div class="divv" style=" height: 100%; margin: 50px auto; text-align:center;">
        <div class="contians" style="width: 600px;">
          <img alt="Vue logo" src="../assets/img/login.jpg" style=""></div>
        <div class="loginForm" style="width: 450px">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="loginname">
              <el-input v-model="ruleForm.loginname"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="passwd">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="">
              <el-row>
                <el-col :span="10">
                  <div class="grid-content bg-purple" style="padding-left: 0">
                    <el-form-item>
                      <el-input type="text" v-model="ruleForm.authCode" style="padding: 0" autocomplete="off"
                                align="left"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12" style="padding-left: 10px">
                  <div class="grid-content bg-purple" @click="update">
                    <el-form-item>
                      <el-input v-model="ruleForm.authCodes" style="width: 60%"></el-input>
                      <span style="padding-left: 10px">更新</span>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
<!--              {{this.ruleForm.authCodes}}-->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')" style="width: 45%">登录</el-button>
              <el-button @click="resetForm('ruleForm')" style="width: 45%; background-color: #92B8B1">重置</el-button>
              <br/>
              <a href="register" style="margin-right: 50px">注册</a>
              <a href="retrievePassword">找回密码</a>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>


<style>
.divv {
  /*width: 500px;*/
  height: 66%;
  background-color: #de0100;
  margin: 20px auto;
}

.contians {
  float: left;
  /*border:1px solid #ccc;*/
  /*display: inline-block;*/
  /*box-sizing: border-box;*/
  margin-top: 120px;
}

.loginForm {
  height: 381px;
  line-height: 1px;
  float: right;
  margin-top: 100px;
  margin-right: 200px;
  padding-right: 50px;
  /*margin-top: 10px;*/
}

.loginForm {
  margin-left: 30px;
  background-color: white;

}

.demo-ruleForm {
  margin: 20px auto;
  width: 80%;
}

#titles {
  font-size: 36px;
}

p {
  margin-top: 20px;
  margin-left: 100px;
  text-align: left;
  margin-bottom: -25px;
}


</style>

<script>
export default {
  name: 'Login',
  data() {
    return {
      ruleForm: {
        loginname: '',
        passwd: '',
        authCodes: '',
        authCode: ''
      },
      hhh: '',

      rules: {
        loginname: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        authCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'}
        ]
      }
    };
  },
  created() {
    //获取验证码
    const _this = this
    axios.get('http://localhost:8082/book-manager/getCode').then(function (resp) {
      // alert(1);
      console.log(resp.data)
      _this.ruleForm.authCodes = resp.data;
    })
  },
  methods: {
    submitForm(formForm) {
      var vm = this;
      let formData = new FormData;
      formData.append("loginname", vm.ruleForm.loginname);
      formData.append("password", vm.ruleForm.password);
      if(this.ruleForm.authCodes.localeCompare(this.ruleForm.authCode)){
        this.$message("验证码输入错误");
      }  else{
        this.$refs[formForm].validate((valid) => {
          if (valid) {
            axios({
              method: 'post',
              url: 'http://localhost:8082/book-manager/login',
              data: formData
            }).then(function (resp) {
              if (resp.data.flag == 'success') {
                var user = resp.data.data;
                //往vuex中放入一个user对象
                vm.$store.dispatch('UpdateUser', user);
                //将数据转换为JSON格式
                var users = "{\"user\":" + JSON.stringify(user) + "}";
                //将其添加到sessionStorage中
                sessionStorage.setItem("state", users);
                if (user.userclassify === 0) {
                  vm.$router.push('/')
                } else {
                  vm.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '前往前台',
                    cancelButtonText: '前往后台'
                  })
                      .then(() => {
                        vm.$router.push('/')
                      })
                      .catch(action => {
                        vm.$router.push('/background')
                      });
                }
              } else {
                console.log('error submit!!');
                return false;
              }
            })
          }
        })
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //更新
    update() {
      const _this = this
      axios.get('http://localhost:8082/book-manager/getCode').then(function (resp) {
        // alert(1);
        console.log(resp.data)
        _this.ruleForm.authCodes = resp.data;
      })
    }
  }
}
</script>
